<template>
	<view>
		<back-nav message='订单详情' :back="back"></back-nav>
		<view class="Topbackground">
			<view class="box">
				<view class="pic" v-if="item.orderStatus == 70 ">
					<image src="../../../../static/icons/orderDetailslogo1.png" mode="scaleToFill"></image>
				</view>
				<view class="state">
					<text>{{ item.orderStatus == 0 ? "订单未支付" : "" }}</text>
					<text>{{ item.orderStatus == 71 ? "未购买" : "" }}</text>
					<text>{{ item.orderStatus == 10 ? "订单进行中" : "" }}</text>
					<text>{{ item.orderStatus == 20 ? "订单识别中" : "" }}</text>
					<text>{{ item.orderStatus == 30 ? "订单识别异常" : "" }}</text>
					<text>{{ item.orderStatus == 40 ? "订单支付中" : "" }}</text>
					<text>{{ item.orderStatus == 50 ? "扣款轮询中" : "" }}</text>
					<text>{{ item.orderStatus == 60 ? "订单支付失败" : "" }}</text>
					<text>{{ item.orderStatus == 70 ? "订单已支付" : "" }}</text>
					<text>{{ item.orderStatus == 80 ? "订单已取消" : "" }}</text>
					<text>{{ item.orderStatus == 90 ? "开门失败，订单取消" : "" }}</text>
				</view>
				<view class="text">
					<text>您的订单如有问题请联系客服</text>
				</view>
			</view>
		</view>
		<view class="goodinfo" v-if="(item.orderDetailList)!=''">
			<view class="list" v-for="shopping in item.orderDetailList" >
				<view class="pic">
					<image src="../../../../static/icons/good.png" mode="scaleToFill"></image>
				</view>
				<view class="info">
					<view class="name">
						<text>{{shopping.goodsName}}</text>
					</view>
					<view class="num">
						<text>X{{shopping.buyCount}}</text>
					</view>
					<view class="money">
						<text>单价:</text>
						<text>￥{{ shopping.salePrice }}</text>
					</view>
				</view>
				<view class="Totalprice">
					<text>￥{{ shopping.salePrice ||'*'}}</text>
				</view>
				<view class="bottom">
				
				</view>
			</view>
			
		</view>
		<view class="goodsList">
			<view class="box">
				<view class="actualAmount">
					<text>实付金额</text>
					<text>￥{{item.orderMoney ||'*'}}</text>
				</view>
				<view class="example"> 
					<text>订单合计</text>
					<text>￥{{ shopping.priceOriginal ||'*'}}</text>
				</view> 
				<view class="goods"> 
					<text>{{item.orderName}}</text>
					<text>-￥{{ item.priceDiscount ||'*' }}</text>
				</view>
				<view class="example">
					<text>支付方式</text>
					<text>微信支付</text>
				</view> 
				<view class="example">
					<text>支付时间</text>
					<text>*</text>
				</view>
				<view class="example">
					<text>订单号</text>
					<view class="icon">
						<text>{{item.orderId}}</text>
						<image src="../../../../static/icons/copy.png" mode="scaleToFill" @click="copy(item.orderId)"></image>
					</view>
				</view>
				<view class="example">
					<text>购买网点</text>
					<text>{{item.deviceId}}</text>
				</view>
				<view class="example">
					<text>订单时间</text>
					<text>{{item.createTime}}</text>
				</view>				
			</view>
		</view>
		<view class="bottomBox">
			<view class="box">
				<view class="one">
					<view class="image">
						<text class="icon">?</text>
					</view>
					<text class="text">对订单有疑问</text>
				</view>
				<view class="two">
					<text>联系客服</text>
					<view class="image">
						<image src="../../../../static/icons/telephone.png" mode=""></image>
						<text>4008-388-948</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:[]
			};
		},
		onLoad(e) {			
			// console.log(decodeURIComponent(JSON.parse(e.item)));
			const eventChannel = this.getOpenerEventChannel();
				// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			    eventChannel.on('event', (data) => {
			    	console.log(data)
			    	this.item = data.data;
			    })
		},
		methods:{
			copy(id){
				 uni.setClipboardData({
				        data:String(id),//要被复制的内容
				        success:()=>{//复制成功的回调函数
						console.log(id);
				          uni.showToast({//提示
						    icon:'none',
				            title:'复制成功'
				          })
				        },
						fail(res) {
							console.log(res);
						},
				      });							
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottomBox{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 10vh;
		position: relative;
		.box{
			position: relative;
			// display: flex;
			width: 90%;	
			top:-2vh;
			background-color: #fff;
			border-radius: 25rpx;
			padding-bottom: 2vh;
			.one{
				margin-top: 30rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				height: 4vh;
				.image{
					height: 60rpx;
					width: 60rpx;
					border-radius: 50%;
					background-color: #34a815;
					display: flex;
					align-items: center;
					justify-content: center;
					.icon{
						font-size: 40rpx;
						color: #fff;
					}
				}
				.text{
					font-size: 28rpx;
					font-weight: 700;
					margin-left: 20rpx;
				}
			}
			.two{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				margin-top: 20rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				.image{
					display: flex;
					justify-content: center;
					align-items: center;					
					image{
						height: 50rpx;
						width: 50rpx;
					}
				}
			}
		}
	}
	.goodsList{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 35vh;
		position: relative;
		.box{
			position: relative;
			// display: flex;
			width: 90%;	
			top:-2vh;
			background-color: #fff;
			border-radius: 25rpx;
			padding-bottom: 2vh;
			.actualAmount{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				background-color:rgba(207, 225, 202, 0.3);
				color: #34a815;
				font-size: 35rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}
			.goods{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 25rpx;
				margin-top: 20rpx;
				word-break: break-all;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}
			.example{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				font-size: 25rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				.icon{
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 35rpx;
						height: 35rpx;
						margin-left: 20rpx;
					}

				}
			}
		}
	}
	.goodinfo{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 7vh;
		position: relative;
		
		.list{
			position: relative;
			display: flex;
			width: 90%;			
			top:-6vh;
			background-color: #fff;
			border-radius: 25rpx;
			.bottom{
				height: 0.6vh;
				width: 100%;
				background-color: #34a815;
				border-bottom-right-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			.pic {
				margin-top: 30rpx;
				margin-left: 30rpx;
				height: 120rpx;
				width: 120rpx;
				border: 1rpx solid #c9c9c9;
				display: flex;
				justify-content: center;
				align-items: center;
			
				image {
					height: 90%;
					width: 90%;
				}
			}
			.info {
				width: 350rpx;
				height: 200rpx;
				display: flex;
				justify-content: center;
				// align-items: center;
				flex-direction: column;
				margin-left: 30rpx;
				.num {
					font-size: 25rpx;					
					color: #b0b0b0;
					margin-top: 10rpx;
				}			
				.name {					
					font-size: 27rpx;
					display: flex;
					word-break: break-all;
				}
			
				.money {
					font-size: 20rpx;
					color: #b0b0b0;
					margin-top: 20rpx;
				}
			}
			.Totalprice{
				font-size: 28rpx;
				position: absolute;
				right: 20rpx;
				bottom:30rpx;
			}
			
		}
	}
	.Topbackground{
		background-color: #004da0;
		height: 28vh;
		width: 100%;
		// box-shadow: 0px -20px 10px 0px rgba(231, 231, 231, 1.0); 
		.box{
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.pic{
				height: 120rpx;
				width: 167rpx;
				margin-top: 3vh;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.state{
				font-size: 35rpx;
				font-weight: 700;
				color: #fff;
				margin-top: 20rpx;
			}
			.text{
				font-size: 25rpx;
				margin-top: 20rpx;
				color: #fff;
			}
		}
	}
</style>
